<template>
    <div>
        <el-row :gutter="20">
            <div v-for="item in tableData" :key="item.value">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <div class="card-box">
                            <el-form ref="editForm" class="form-wrap" size="small">
                                <div class="data-title full mb12">{{item.taxesName}}</div>
                                <div style="padding: 10px 20px;">
                                    <tr v-if="item.taxesName === '城镇土地使用税'" class="full">
                                        <td>税级：</td><td>1级、2级、3级、4级、5级；</td>
                                    </tr >
                                    <tr v-if="item.taxesName === '城镇土地使用税'" class="full">
                                        <td>适用税额：</td><td>{{item.taxes}}</td>
                                    </tr>
                                    <tr  v-else class="full">
                                        <td>税率：</td><td>{{item.taxes}}%</td>
                                    </tr>
                                    <tr class="full">
                                        <td>计税公式：</td><td>{{item.formula}}</td>
                                    </tr>
                                    <tr class="full">
                                        <td>更新时间：</td><td>{{item.updateTime}}</td>
                                    </tr>
                                    <tr class="full">
                                        <td>适用时间：</td><td>{{item.startTime}}——{{item.endTime}}</td>
                                    </tr>
                                </div>

                            </el-form>
                            <div  class="footer-btn">

                                <el-button type="text" @click="editData(item)">编 辑</el-button>    <span>|</span>    <el-button type="text" @click="showData(item)">查 看</el-button>
                            </div>
                        </div>
                    </div>
                </el-col>

            </div>
        </el-row>
        <show-data ref="showData"></show-data>
        <edit-data ref="editData" @handleCancel="handleCancel"></edit-data>
    </div>

</template>

<script src="./index.js"></script>

<style lang="scss" scoped>

    .el-row {
        padding: 20px;
        margin-bottom: 20px;
        &:last-child {
         margin-bottom: 0;
        }
    }

    .el-col {
        padding: 40px;
        border-radius: 4px;
    }

    .bg-purple {
        background: #ffffff;
    }

    .grid-content {
        overflow: hidden;
        border-radius: 4px;
        min-height: 36px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.07);
    }
    .data-title{
        font-size: 18px;
    font-weight: 700;
        padding: 15px;
        border-bottom: 1px solid rgba(97, 106, 120, 0.07);
    }
    .footer-btn{
        position: absolute;
        bottom: 15px;
        right: 20px;
    }
    .card-box {
        height: 270px;
        position: relative;
    }
</style>

